Baji — Big Sister Program

Summary

Baji was created to be an outline to offer curriculum programs as well as an infrastructure template. The main core of Baji is meant for younger muslims to get guidance from an older sister/brother like figure.

Key Challenge

The Baji brand needs a website for communities that could use help in building outreach programs and to showcase the curriculum Baji has to offer.

Role

Product Designer

• User Research
• Interaction
• Visual Design
• Prototyping
• Testing

Target

Muslim communities

Research

I started researching with interviews from a focus group. I asked members of muslim communities questions like:

• What do they feel like is missing in their communities?
• If they could have one thing in their community, what would it be?

Pain Points

• There is no community engagement from masjids and Islamic centers.
• The programs for kids are limited to just one activity.
• Events for the whole family would bring the families in the community together instead of waiting for a holiday.

Competitive Audit

When conducting the research, I looked at how community run programs tend to function. Most of the models were self run with guidance on how to start your own branch. I thought this would be a great model to use because it would allow the community to decide what they are lacking.

Personas

After a few interviews, I was able to construct a few personas based on people I interviewed from Islamic communities.

Samaya

Samaya is a recent college graduate who just came back from volunteer work with the United Nations. She wants to do more for her community but has a hard time finding resources that she can use to grow programs. She also is not sure how to begin to bring together a community.

Goals

• Find a way to create a community based on Islamic values
• Have resources and a structure she can use to organize activities

Frustrations

• Not knowing where to begin in starting a community
• Having to create activities from scratch

Ebrahim

Ebrahim wants to move to a new city in the US. He is not worried about finding a job, because he works remotely. What he does want to do is find a city with a good community. Doing searches on popular search engines turn up results with mosques and populations count, but he does not know much about the communities themselves.

Goals

• Find a community in a city where he can move to
• Find a community that aligns with his values

Frustrations

• Search engines provide a place to start, but not details
• Disorganization of local communities

I started the layout with the idea that I would want a splash image. Each page would have a person who the user would feel represents them. I also had to consider ways to have the layout best convey the information in an easy to read manner. Lastly, I had to keep in mind the difference in pages and what they had to offer.

Usability Study

The study I have conducted was unsupervised with a list of tasks and a list of questions. In doing so, I learned a few drawbacks as well as a few positives that helped me understand the direction this project needed to go.

Questions and Tasks

• What would you click to get to the Programs page?

  • Can you tell me what programs are offered?
• Is the information easily readable?
• What are your thoughts on accessing the Programs page?

Results

From the lofi prototype testing I learned a few things that made an impact on this project and projects to come.

One of the things I learned is that it would be more helpful for users to get a grasp of what the product is about even if it had text that was not finished instead of mock up text such as Lorem Ipsum.

Another point that really had stuck out to me was the page layout themselves felt like to the users they were completely different pages. Even though this was just a wireframe, I think the layout of the pages were not consistent.

Mock Ups

Taking what I learned from the results, I went to implement those changes into my design. Everytime I move from wireframe to the first mock up it is another learning experience. I saw a few places where I had to make changes in order for the design to make sense or to be readable.

Accessibility

In the design process I was able to find a few errors in the design that caused an accessibility problem. Particularly the navigation menu being difficult to read. My original plan when making the wireframe was to make the text white so that it would contrast the image, but I did not consider parts of the image to be a lighter color.

I created a smooth fade to prevent the image from making it difficult to read and kept with the black on white background. This also helped the logo and the account icon. Accessibility to some, is accessibility to all, however, making the navigation items easier to read was a great choice.

Take Away

Taking this old design concept I made and turning it into an actual product was a fun project, but it was also a good learning experience. Taking notes from what the user base needs and wants allowed me to find better accessibility options, make a more unifying experience, and a product that is functional yet true to the brand.

The process in testing and designing and refining allowed me to learn how I can make future tests easier for the user, to keep accessibility in mind, and not to worry too much about the next step.

Next Steps

The next steps for this project would be to design a mobile page. I had created a webpage because I felt like that is where someone would go to start the process of signing up or starting their own branch. However, it is not tested and users still may want to access the information through their phone for reference when discussing the possibility of signing up or starting a branch.